<template>
  <div class="leftNavBar">
    <div class="logoCnt pt-32 mb-50">
      高校实验室安全监管系统
      <!-- <img
        style="width: 200px; height: 30px"
        src="../assets/images/login-logo.png"
        alt=""
      /> -->
    </div>
    <div class="avatarinfo flex mb-20">
      <div class="flex">
        <!-- <i class="iconfont el-icon-question"></i> -->
        <img
          src="https://img1.baidu.com/it/u=1541636380,2661844494&fm=26&fmt=auto&gp=0.jpg"
          alt=""
        />
        <div class="ml-10">
          <div class="fs-16">Joker</div>
          <div class="cr-main">平台管理员</div>
        </div>
      </div>
      <!-- <div>
        <el-badge value="8" class="item">
          <i class="iconfont el-icon-s-cooperation"></i>
        </el-badge>
      </div> -->
    </div>
   <el-menu
      :default-active="$route.path"
      @open="open"
      class="navBarUl"
      text-color="#AEB3BF"
      active-text-color="#666666"
      unique-opened
    >
      <div v-for="(item, index) of pageTree" :key="index">
        <div v-if="item.children">
          <el-submenu :index="item.url" class="level1Sub">
            <template slot="title">
              <img
                class="navIcon"
                :class="navIcons[item.name]"
                :src="'/img/' + navIcons[item.name] + '.png'"
                alt
              />
              <span>{{ item.name }}</span>
            </template>
            <div v-for="(citem, cindex) of item.children" :key="cindex">
              <div v-if="citem.children">
                <el-submenu :index="citem.url" class="level2Sub">
                  <template slot="title">
                    <span>{{ citem.name }}</span>
                  </template>
                  <div
                    v-for="(ccitem, ccindex) of citem.children"
                    :key="ccindex"
                  >
                    <el-menu-item
                      :index="ccitem.url"
                      class="level3"
                      @click="routerPage(ccitem.url)"
                      >{{ ccitem.name }}</el-menu-item
                    >
                  </div>
                </el-submenu>
              </div>
              <div v-else>
                <el-menu-item
                  :index="citem.url"
                  class="level2"
                  @click="routerPage(citem.url)"
                  >{{ citem.name }}</el-menu-item
                >
              </div>
            </div>
          </el-submenu>
        </div>
        <div v-else>
          <el-menu-item
            :index="item.url"
            class="level1"
            @click="routerPage(item.url)"
          >
            <img
              class="navIcon"
              :class="navIcons[item.name]"
              :src="'/img/' + navIcons[item.name] + '.png'"
              alt
            />
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </div>
      </div>
    </el-menu> 
  
   <!-- <div class="leftNavShowBtn">
      <div
        class="circle"
        :class="{ hiddenLeftNav: hiddenLeftNav }"
        @click="changeHiddenLeftNav"
      >
        <i class="el-icon-arrow-left"></i>
      </div>
    </div>  -->
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
import storage from "@/plugins/localStorage";
import { tabList1, tabList2 } from "@/jsonData/tabsList";
export default {
  name: "leftNavBar",
  props: [],
  data() {
    return {
      msg: "hello leftNavBar!",
      navIcons: {
        //左侧列表图表
        实时监控: "monitor",
        报告报表: "reportForm",
        历史数据: "history-data",
        资产管理: "asset",
        预警管理: "alarm",
        日常管理: "daily",
        系统管理: "systemConfig",
        移动监测系统: "mobileMonitor",
        设备接入: "device",
        信息公开: "book",
        运维管理: "operation",
        污染管理: "pollution",
        废液转运: "transport",
        移动监测车: "pointSetting",
        数据分析: "dataAnalysis",
      },
      // activeIndex: '1-1'
    };
  },
  methods: {
    ...mapActions([
      "getStationListName",
      "getVehicleNumList",
      "fetchWaterStationPollutant",
    ]),
    ...mapMutations([
      "changeActiveIndex",
      "changeHiddenLeftNav",
      "changeCurPageCanDo",
    ]),
    routerPage(path) {
      if (path) {
        this.$router.push(path);
      }
    },
    async stationSelIsNull() {
      const myStation = JSON.parse(storage.get("myStation"));
      const vehicleList = JSON.parse(storage.get("vehicleList"));
      const pollutantList = JSON.parse(storage.get("pollutantList"));
      if (!(myStation instanceof Array)) {
        await this.getStationListName({ dataType: null });
      }
      if (!(vehicleList instanceof Array)) {
        await this.getVehicleNumList();
      }
      if (!(pollutantList instanceof Array)) {
        await this.fetchWaterStationPollutant();
      }
    },
    loopMatching(path) {
      let that = this;
      // 深度遍历匹配
      let dataSource = JSON.parse(JSON.stringify(that.pageTree));
      let res = [];
      (function dfs(node) {
        if (node) {
          res.push(node);
          // 深度搜索一条数据，存取在数组 res 中
          if (node.children) return dfs(node.children[0]);

          let mapRes = res.find((v) => v.path === path);
          //匹配成功 做某些操作并返回匹配结果

          if (mapRes) {
            that.changeActiveIndex(mapRes.index);
            that.changeCurPageCanDo(mapRes.canDo || []);
            return mapRes;
          }
          // 匹配失败则删掉当前比对的节点
          res.pop();
          // 没有匹配到任何值则 return，如果源数据有值则再次深度搜索
          if (!res.length)
            return dataSource.length ? dfs(dataSource.shift()) : res;
          // 取得最后一个节点，待做再次匹配
          var lastNode = res[res.length - 1];
          // 删除已经匹配失败的节点（即为上面 res.pop() 的内容）
          lastNode.children.shift();
          // 没有 children 时
          if (!lastNode.children.length) {
            // 删除空 children，且此时需要深度搜索的为 res 的最后一个值
            delete lastNode.children;
            return dfs(res.pop());
          }
          return dfs(lastNode.children[0]);
        }
      })(dataSource.shift());
    },
  },
  computed: {
    ...mapGetters({
      pageTree: "getPageTree",
      activeIndex: "getActiveIndex",
      curPageCanDo: "getCurPageCanDo",
      hiddenLeftNav: "getHiddenLeftNav",
    }),
  },
  watch: {
    $route: {
      handler(val) {
        //判断水站列表是否还有
        this.loopMatching(val.path);
        this.stationSelIsNull();
      },
      deep: true,
    },
  },
};
</script>

<style scoped lang="scss">
.leftNavBar {
  background: #fff;
  position: fixed;
  top: 0;
  width: 260px;
  height: 100%;
  z-index: 9;

  .logoCnt {
    width: 100%;
    height: 21px;
    font-size: 18px;
    font-family: PangMenZhengDao;
    font-weight: bold;
    color: #00bfb1;
    // height: 50px;
    // line-height: 50px;
    text-align: center;
    // img {
    //   vertical-align: middle;
    // }
  }
  .avatarinfo {
    margin-top: 40px;
    padding: 0px 20px;
    box-sizing: border-box;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    // height: 50px;
  }
  .navIcon {
    width: 18px;
    position: relative;
    left: -8px;
  }
  .navBarUl {
    height: 100%;
    border-right: none;
  }
  .leftNavShowBtn {
    position: absolute;
    right: -15px;
    top: 66px;
    background: #f2f2f2;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    .circle {
      position: absolute;
      left: 13%;
      top: 13%;
      width: 80%;
      height: 80%;
      line-height: 24px;
      background-color: #4eb2ff;
      border-radius: 50%;
      text-align: center;
      color: #fff;
      cursor: pointer;
      transform: rotate(0deg);
      transition: 0.2s ease;
    }
    .circle:hover {
      background-color: #2080db;
    }
    .circle.hiddenLeftNav {
      transform: rotate(180deg);
      left: 25px;
      top: -5px;
    }
  }
}
/* @keyframes scale {
  from { transform: scale(1.1); }
  50% { transform: scale(0.9); }
  to { transform: scale(1.15); }
} */

/*
  level1 代表一级普通菜单
  level1Sub 代表一级下拉菜单
  level2 代表二级普通菜单
  level2Sub 代表二级普通菜单
  level3 代表三级普通菜单
*/
.level1 {
  border-left: 2px solid transparent;
}
// .el-menu-item,
// .el-submenu{
//   width: 220px;
//   height: 48px;
//   line-height: 48px;
//   margin-left: 20px;
//   border-radius: 8px;
// }
.level1.is-active {
  // border-color: #04a9f3;
}
.level1,
.level2,
.level3 {
  border-left: 2px solid transparent;
  transition: all 0.2s ease-in;
}
.level1.is-active,
.level2.is-active,
.level3.is-active {
  // border-color: #ECEFF6;
  background-color: #eceff6;
  // background-image: linear-gradient(-90deg, #ffffff 0%, #ECEFF6 100%);
}
.level2Sub .el-submenu__title,
.level2 {
  // padding-left: 50px !important;
}
.navIcon.asset {
  width: 16px;
  height: 16px;
}
.navIcon.book {
  height: 18px;
}
.reportForm {
  width: 16px !important;
}
.pointSetting {
  width: 20px !important;
}
</style>



